<template>
    <crud-page
        :columns="columns"
        :getApi="getGoodsNavApi"
        :createApi="createGoodsNavApi"
        :updateApi="updateGoodsNavApi"
        :deleteApi="deleteGoodsNavApi"
        :form="form"
        :initialFormData="initialFormData"
        v-model:formData="formData"
        :scroll="true"
        :customEditRecord="record => ({ ...record, relation: record.relation.map(item => item._id) })"
        :pagination="true"
    >
        <template #form>
            <AFormItem label="关联商品" name="relation">
                <ASelect
                    @search="getGoods"
                    v-model:value="formData.relation"
                    :multiple="true"
                    placeholder="请选择商品"
                    mode="multiple"
                    :options="goodsList"
                    :filter-option="false"
                >
                    <template v-if="fetching" #notFoundContent>
                        <a-spin size="small" />
                    </template>
                </ASelect>
            </AFormItem>
        </template>
    </crud-page>
</template>

<script lang="ts">
import { createGoodsNavApi, deleteGoodsNavApi, getGoodsApi, getGoodsNavApi, Goods, updateGoodsNavApi } from "@/api/goods";
import CrudPage from "@/components/CrudPage.vue";
import { computed, defineComponent, PropType, reactive, toRefs, watch } from "vue";
import { debounce } from "lodash-es";
import {} from "ant-design-vue";
import { ColumnType } from "ant-design-vue/es/vc-table/interface";
export default defineComponent({
    components: { CrudPage },
    setup() {
        const initialFormData = {
            title: "",
            link: "",
            position: 1,
            is_opennew: 2,
            sort: 100,
            relation: [],
            status: 1,
            link_type: 2,
            route_type: 0,
        };
        const state = reactive({
            formData: {
                ...initialFormData,
            },
            goodsList: [],
            fetching: false,
        });
        const columns = reactive([
            { dataIndex: "title", title: "导航名", fixed: "left", type: "input", width: 10 },
            { dataIndex: "link", title: "跳转链接", type: "input", width: 16 },
            {
                dataIndex: "position",
                title: "显示位置",
                customRender({ text }: { text: number }) {
                    return text === 1 ? "顶部" : text === 2 ? "中间" : text === 3 ? "底部" : "";
                },
                options: [
                    { value: 1, innerText: "顶部" },
                    { value: 2, innerText: "中间" },
                    { value: 3, innerText: "底部" },
                ],
                type: "select",
                width: 10,
            },
            {
                dataIndex: "link_type",
                title: "链接类型",
                customRender({ text }: { text: number }) {
                    return text === 1 ? "路由" : text === 2 ? "外链" : "";
                },
                options: [
                    { value: 1, innerText: "路由" },
                    { value: 2, innerText: "外链" },
                ],
                type: "select",
                width: 10,
            },
            {
                dataIndex: "route_type",
                title: "路由类型",
                customRender({ text }: { text: number }) {
                    return text === 0 ? "无" : text === 1 ? "push" : text === 2 ? "replace" : "";
                },
                options: [
                    { value: 0, innerText: "无" },
                    { value: 1, innerText: "push" },
                    { value: 2, innerText: "replace" },
                ],
                type: "select",
                width: 10,
            },
            {
                dataIndex: "is_opennew",
                title: "打开窗口",
                customRender({ text }: { text: number }) {
                    return text === 1 ? "本窗口" : text === 2 ? "新窗口" : "";
                },
                options: [
                    { value: 1, innerText: "本窗口" },
                    { value: 2, innerText: "新窗口" },
                ],
                type: "select",
                width: 10,
            },
            { dataIndex: "sort", title: "排序号", type: "inputNumber", width: 10 },
            {
                dataIndex: "relation",
                title: "关联商品",
                customRender({ text }: { text: Goods[] }) {
                    return text.map(item => item.title).join("、");
                },
                width: 10,
                ellipsis: true,
            },
            {
                dataIndex: "status",
                title: "状态",
                type: "select",
                options: [
                    { value: 1, innerText: "可用" },
                    { value: 0, innerText: "不可用" },
                ],
                customRender: ({ text }: { text: number }) => (text ? "可用" : "不可用"),
                width: 10,
            },
            { dataIndex: "operation", title: "操作", fixed: "right", width: 10 },
        ]);

        const getGoods = debounce((title?: string) => {
            state.fetching = true;
            state.goodsList = [];
            getGoodsApi({ title })
                .then(res => {
                    if (res.code === 200) {
                        state.goodsList = res.data.data.map((item: Goods) => ({
                            label: item.title,
                            value: item._id,
                        }));
                    }
                })
                .finally(() => (state.fetching = false));
        }, 300);
        getGoods();
        return {
            columns,
            form: columns.filter(item => item.type),
            getGoodsNavApi,
            updateGoodsNavApi,
            createGoodsNavApi,
            deleteGoodsNavApi,
            initialFormData,
            ...toRefs(state),
            getGoods,
        };
    },
});
</script>

<style scoped lang="scss"></style>
